<template>
  <view class="search-container">
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-bar">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索合同、租客、房源" 
          confirm-type="search"
          @confirm="doSearch"
          focus
        />
        <uni-icons v-if="searchKeyword" type="clear" size="18" color="#999" @click="clearSearch"></uni-icons>
      </view>
      <text class="cancel-btn" @click="goBack">取消</text>
    </view>
    
    <!-- 搜索历史 -->
    <view class="search-history" v-if="!searchKeyword && searchHistory.length > 0">
      <view class="history-header">
        <text class="title">搜索历史</text>
        <uni-icons type="trash" size="18" color="#999" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-list">
        <view 
          class="history-item" 
          v-for="(item, index) in searchHistory" 
          :key="index"
          @click="useHistoryItem(item)"
        >
          <text>{{item}}</text>
        </view>
      </view>
    </view>
    
    <!-- 搜索结果 -->
    <view class="search-results" v-if="searchKeyword && !isLoading">
      <view class="result-count" v-if="searchResults.length > 0">
        <text>找到 {{searchResults.length}} 条结果</text>
      </view>
      <view class="no-result" v-else>
        <text>没有找到相关结果</text>
      </view>
      
      <view class="contract-list">
        <view 
          class="contract-item" 
          v-for="(item, index) in searchResults" 
          :key="index"
          @click="goToDetail(item)"
        >
          <view class="contract-content">
            <view class="contract-info">
              <view class="contract-title">{{item.title}}</view>
              <view class="contract-detail">
                <text class="department">{{item.department}}</text>
                <text class="date">{{item.start_date}} 至 {{item.end_date}}</text>
                <text class="tenant">| {{item.tenant}}</text>
              </view>
              <view class="contract-status">
                <text class="days-left">{{item.days_left}}天后离店</text>
                <text class="tag" v-if="item.tag">{{item.tag}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载中 -->
    <view class="loading" v-if="isLoading">
      <text>搜索中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      searchHistory: [],
      searchResults: [],
      isLoading: false
    }
  },
  onLoad() {
    // 获取搜索历史
    const history = uni.getStorageSync('contractSearchHistory');
    if (history) {
      this.searchHistory = JSON.parse(history);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    clearSearch() {
      this.searchKeyword = '';
      this.searchResults = [];
    },
    doSearch() {
      if (!this.searchKeyword.trim()) return;
      
      // 添加到搜索历史
      if (!this.searchHistory.includes(this.searchKeyword)) {
        this.searchHistory.unshift(this.searchKeyword);
        // 只保留最近10条
        if (this.searchHistory.length > 10) {
          this.searchHistory = this.searchHistory.slice(0, 10);
        }
        uni.setStorageSync('contractSearchHistory', JSON.stringify(this.searchHistory));
      }
      
      // 执行搜索
      this.isLoading = true;
      setTimeout(() => {
        // 模拟搜索结果
        this.searchResults = [
          {
            title: '光谷青年城9号1单元3214·1',
            department: '总部 | 杨子维',
            start_date: '2023-08-23',
            end_date: '2024-02-22',
            tenant: '杨子维',
            days_left: 1,
            tag: ''
          },
          {
            title: '明珠花园5号3单元701·1',
            department: '总部 | 庞楚杨',
            start_date: '2024-02-23',
            end_date: '2025-02-22',
            tenant: '庞楚杨',
            days_left: 1,
            tag: ''
          }
        ];
        this.isLoading = false;
      }, 500);
    },
    clearHistory() {
      uni.showModal({
        title: '提示',
        content: '确定要清空搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            this.searchHistory = [];
            uni.removeStorageSync('contractSearchHistory');
          }
        }
      });
    },
    useHistoryItem(item) {
      this.searchKeyword = item;
      this.doSearch();
    },
    goToDetail(item) {
      // 跳转到合同详情页
      uni.navigateTo({
        url: `/pages/contract/detail?id=${item.id}`
      });
    }
  }
}
</script>

<style lang="scss">
.search-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    margin-right: 20rpx;
    
    input {
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      margin: 0 10rpx;
    }
  }
  
  .cancel-btn {
    font-size: 28rpx;
    color: #333;
  }
}

.search-history {
  background-color: #fff;
  margin-top: 20rpx;
  padding: 20rpx 30rpx;
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .history-list {
    display: flex;
    flex-wrap: wrap;
    
    .history-item {
      background-color: #f5f5f5;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      
      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.search-results {
  padding: 20rpx;
  
  .result-count, .no-result {
    padding: 20rpx 0;
    text-align: center;
    
    text {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.contract-list {
  .contract-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .contract-content {
      padding: 24rpx 20rpx;
      
      .contract-info {
        .contract-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
          margin-bottom: 16rpx;
        }
        
        .contract-detail {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 16rpx;
          
          text {
            margin-right: 10rpx;
            
            &.department {
              color: #1890ff;
            }
          }
        }
        
        .contract-status {
          font-size: 24rpx;
          
          .days-left {
            color: #ff4d4f;
          }
          
          .tag {
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 4rpx 12rpx;
            border-radius: 4rpx;
            font-size: 20rpx;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}

.loading {
  text-align: center;
  padding: 40rpx;
  
  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>